$(function(){
    // 设置初始页
    var currpage = 1;
    var render = function(){
        // console.log(currpage)          
        getsecondcategory({
            page:currpage,
            pageSize:3
        },function(data){
            // console.log(data)
                // 渲染页面
                $('tbody').html(template('template',data))
                // 渲染分页
                setPagenitor(data.page,Math.ceil(data.total/data.size))
        })
    }
    render();
     // 2.分页展示
     var setPagenitor = function (currPage, totalPages) {
        $('#paginator').bootstrapPaginator({
            // 版本
            bootstrapMajorVersion: 3,
            // 当前页
            currentPage: currPage,
            // 总页数
            totalPages: totalPages,
            size: 'small',
            itemTexts: function (type, page, current) {//设置显示的样式，默认是箭头
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //点击事件
            onPageClicked: function (event, originalEvent, type, page) {
                // console.log(page);
                // page为当前你点击的页面
                // 将页码改为点击的页码，在进行渲染
                currpage = page;
                render();
            }

        })
    }
      
//    模态框
$('.add-btn').on('click',function(){
    $('#optionModal').modal('show');
    
})
// 初始化模态框的功能
initdropdown();

// 图片的上传，显示
picupload();

// 下拉框的选中
$('.dropdown-menu').on('click','li',function(){
    // console.log($(this).html())
    $('.choose').html($(this).html());
    // 设置选中的id值
    $('[name="categoryId"]').val($(this).data('id'))
    // 显示合法的提示，当下拉一级图片上传，选中时
    $('#form').data('bootstrapValidator').updateStatus('categoryId', 'VALID')
   
})

// 确定提交的数据categoryId,brandlogo,
// 校验
$('form').bootstrapValidator({

    // 校验插件会默认忽略隐藏的元素
    excluded:[],//不忽略任何情况的表单元素
    // 默认的样式
    feedbackIcons: {/*input状态样式图片*/
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    // 校验规则
    fields:{
        categoryId:{
            validators: {
                notEmpty: {//非空验证：提示消息
                    message: '请选择一级分类'
                }
            }
        },
        brandName:{
            validators: {
                notEmpty: {//非空验证：提示消息
                    message: '请输入二级分类名称'
                }
            }
        },
        brandLogo:{
            validators: {
                notEmpty: {//非空验证：提示消息
                    message: '请上传二级分类的LOGO'
                }
            }
        }

    }
}).on('success.form.bv', function(e) {//点击提交之后
    // 禁用默认提交事件，使用ajax来提交
    // console.log(11111);
    e.preventDefault();
    // console.log(11111);
    // 获取当前表单的值
    var $form = $(e.target);
    // 发送ajax请求
    $.ajax({
        type:'post',
        url:'/category/addSecondCategory',
        data:$form.serialize(),
        dataType:'json',
        success:function(data){
            if(data.success){
                // 关闭模态框
                $('#optionModal').modal('hide');
                // 渲染第一页
                currpage =1;
                render();
                // 重置初始化表单数据
                $("form").data('bootstrapValidator').resetForm();
                $('#image')[0].src="images/none.png";
                $('.choose').html('请选择');

            }
        }
    })

})


      
})


// 获取数据
var getsecondcategory = function(paramas,callback){
    $.ajax({
        type:'get',
        url:'/category/querySecondCategoryPaging',
        data:paramas,
        dataType:'json',
        success:function(data){
            callback && callback(data)
        }
    })
}

// 下拉框的初始化
var initdropdown = function(){
    $.ajax({
        type:'get',
        url:'/category/queryTopCategoryPaging',
        data:{
            page:1,
            pageSize:999
        },
        dataType:'json',
        success:function(data){
            // console.log(data);
            $('.dropdown-menu').html(template('dropdownmenu',data))
        }
    })
}  


// 图片的上传
// name的值为ajax请求端口需要的参数
// data-url为接口
var picupload = function(){
    $('[name="pic1"]').fileupload({
        dataType: 'json',
        done: function (e, data) {
            // console.log(data);
            // 预览
            $('#image')[0].src=data.result.picAddr;
            // 将图片上传的地址存在隐藏中
            $('[name="brandLogo"]').val(data.result.picAddr);
            $('#form').data('bootstrapValidator').updateStatus('brandLogo', 'VALID')
            
        }   
    });
}